<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <title>CSS3 の text-shadow を使って文字を強調したり装飾したり</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                line-height: 1.5em;
            }
            
            body {
                margin: 0px;
                padding: 0px;
                font-size: 20px;
            }
            
            pre {
                margin: 5px;
                padding: 5px;
                box-shadow: 0px 0px 4px 0px #aaa;
                
                font-family: 'Consolas', 'Monaco', 'ＭＳ ゴシック';
                font-size: 12px;
            }
            
            header {
                margin: 0px;
                padding: 10px 20px;
                background-color: #eee;
                box-shadow: 0px 0px 8px 0px #aaa;
            }
            
            header h1 {
                text-shadow: 2px 2px 4px #aaa;
            }
            
            section {
                margin: 50px 30px;
            }
            
            section > h2 {
                border-left: 1em solid #CCC;
                padding-left: 0.5em;
            }
            
            footer {
                position: absolute;
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 10px 20px;
                background-color: #eee;
                box-shadow: 0px 0px 8px 0px #aaa;
                text-align: center;
            }
            
        </style>
        <style>
            
            #sample h3 {
                border-bottom: 2px dotted #aaa;
            }
            #sample p {
                font-size: 48px;
            }
            
            
            #sample00 p {
                text-shadow: 0px 0px 4px #f00;
            }
            
            #sample01 p {
                text-shadow: 2px 2px 2px #0f0;
            }
            
            #sample02 p {
                text-shadow:
                    0px 0px 2px rgb(0,0,100),
                    0px 0px 4px rgb(0,0,200),
                    0px 0px 16px rgb(0,0,255),
                    0px 0px 16px rgb(0,0,255);
            }
            
            #sample03 p {
                color: white;
                text-shadow:
                    0 0 10px #f0f,
                    0 0 20px #f0f,
                    0 0 40px #f0f,
                    0 0 60px #f0f,
                    0 0 80px #f0f;
            }
            
            #sample04 p {
                color: #888;
                text-shadow:
                    0px -2px 2px #000,
                    0px 8px 10px #000;
            }
            
            #sample05 p {
                text-shadow:
                    0 0 20px #fefc00,
                    0 0 20px #fefc00,
                    0 -10px 30px #fecc00,
                    0 -10px 40px #feac00,
                    0 -20px 50px #fe8c00,
                    0 -40px 60px #ff4000,
                    0 -40px 80px #ff0000;
            }
            
            #sample06 ul * {
                font-family: 'Consolas', 'Monaco', 'ＭＳ ゴシック';
            }
            #sample06 ul {
                -webkit-transition: 500ms;
                -moz-transition: 500ms;
                -o-transition: 500ms;
                transition: 500ms;
            }
            #sample06 ul:hover {
                color: transparent;
                text-shadow: 0px 0px 3px #aaa;
            }
            #sample06 ul:hover li:hover {
                color: blue;
                text-shadow: none;
            }
            
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 の text-shadow を使って文字を強調したり装飾したり</h1>
            <p>
                text-shadow を使えば文字を強調したり装飾したりってことが簡単にできます.
                今後は画像を使わずに CSS を活用して Web デザインする時代がくる(はず. いやもうきてる?)なので
                ぜひものにしましょう.
            </p>
        </header>
        
        <section id="sample">
            <h2>text-shadow samples</h2>
            
            <section id="sample00">
                <h3>Sample 00</h3>
                <p>Time is money.</p>
            </section>
            
            <section id="sample01">
                <h3>Sample 01</h3>
                <p>Time is money.</p>
            </section>
            
            <section id="sample02">
                <h3>Sample 02</h3>
                <p>Time is money.</p>
            </section>
            
            <section id="sample03">
                <h3>Sample 03</h3>
                <p>Time is money.</p>
            </section>
            
            <section id="sample04">
                <h3>Sample 04</h3>
                <p>Time is money.</p>
            </section>
            
            <section id="sample05">
                <h3>Sample 05</h3>
                <p>Time is money.</p>
            </section>
            
            <section id="sample06">
                <h3>Sample 06</h3>
                <ul>
                    <li>AAAA AAAA AAAA AAAA</li>
                    <li>BBBB BBBB BBBB BBBB</li>
                    <li>CCCC CCCC CCCC CCCC</li>
                    <li>DDDD DDDD DDDD DDDD</li>
                </ul>
            </section>
            
        </section>
        
        <footer>
            <p>関連エントリーは<a href="#">こちら</a></p>
        </footer>
    </body>
</html>